<template>
	<app-layout>
		<view v-if="!goods" class="u-goods-detail"></view>
		<template v-if="goods">
			<!--商品轮播图-->
			<app-goods-banner v-bind:pic-list="goods.pic_url" v-bind:share="goods.share"
				v-bind:video-url="goods.video_url" v-bind:goods_id="goods.id"></app-goods-banner>
			<!--商品标题-->
			<view class="goods-name t-omit-two">{{goods.name}}</view>
			<view v-if="goods.subtitle" class="goods-subtitle">
				<view class="t-omit-three">{{goods.subtitle}}</view>
			</view>
			<!--商品价格-->
			<view class="price">
				<app-goods-price :ispingtai="false" @quickShare="quickShare" v-bind:discount='discount'
					v-bind:is_vip_card_user="is_vip_card_user" v-bind:goods="goods" v-bind:select-attr="selectAttr"
					v-bind:theme="getTheme" v-bind:has-poster-nav="true"
					v-bind:poster-config="poster_config + `&goods_id=` + goods.id"
					v-bind:poster-generate="poster_generate + `&goods_id=` + goods.id"></app-goods-price>
			</view>
			<!--商品超级会员卡-->
			<!-- <view class="vip-card" v-if="is_vip">
				<app-vip-card background="#fff" top="0"></app-vip-card>
			</view> -->
			<!--限时抢购入口-->
			<!-- <app-goods-flash-sale v-if="flash_sale" :theme="getTheme" :flash_sale="flash_sale"></app-goods-flash-sale> -->
			<!--商品服务-->
			<!-- <view class="goods-margin" v-if="services">
				<app-goods-service :guarantee_title="goods.guarantee_title" :guarantee_pic="goods.guarantee_pic"
					:theme="getTheme" :list="services"></app-goods-service>
			</view> -->
			<!--商品规格-->
			<u-attr textprice="售价" :leftFunc="true" @leftFunc="leftFunc" :rightFunc="true" @rightFunc="rightFunc"
				:ispingtai="false" v-if="goods.is_negotiable === 0" v-model="attrShow" :goods="goods"
				:themeObject="themeObject" :checked="checked" @check="check" rightText="立即购买">
				<!-- :is_show_left="false" :is_must_left="false" -->
				<view class="goods-margin" slot="btn" v-if="goods.type === 'goods'">
					<app-goods-attr :attr-groups="goods.attr_groups" :selectAttr="checked" :attr="goods.attr">
					</app-goods-attr>
				</view>
			</u-attr>
			<!--商品优惠券-->
			<view class="goods-margin">
				<app-goods-coupon @change="setCoupon" :theme="getTheme" :coupons="goods.goods_coupon_center">
				</app-goods-coupon>
			</view>
			<!--商品信息-->
			<view class="goods-margin">
				<app-goods-marketing :limit="goods_marketing.limit" :express="express"
					:shipping="goods_marketing.shipping" :pickup="goods_marketing.pickup"
					:balance="goods_marketing_award.balance" :coupon="goods_marketing_award.coupon"
					:card="goods_marketing_award.card" :theme="getTheme" :integral="goods_marketing_award.integral">
				</app-goods-marketing>
			</view>
			<!--套餐组合-->
			<!-- <view @click="toComposition" class="goods-composition goods-margin"
				v-if="composition && composition.list.length > 0">
				<view class="goods-composition-title">套餐组合</view>
				<uni-swiper-dot :current="current" :theme="getTheme" :info="composition.list" mode="customize">
					<swiper @change="change" class="goods-composition-swiper" :current="current" :autoplay="true">
						<swiper-item v-for="item in composition.list" :key="item.id">
							<app-composition :theme="getTheme" @click="toComposition(item)" @look="toComposition(item)"
								:item="item"></app-composition>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
				<view class="goods-composition-more main-between cross-center">
					<view>更多套餐组合</view>
					<image src="/static/image/icon/arrow-right.png"></image>
				</view>
			</view> -->
			<!--商品详情-->
			<view class="goods-margin">
				<app-goods-detail :ispingtai="false" :goods="{detail, id: goodsId}"></app-goods-detail>
			</view>
			<!--相关推荐-->
			<!-- <app-goods-recommend :sureCart="true" :theme="getTheme" :goods-list="recommend_list"></app-goods-recommend> -->
			<!--空格区域-->
			<view class="safe-area-inset-bottom u-bottom">
				<view class="u-bottom-height" :class="full_reduce ? 'u-bottom-height-1' : 'u-bottom-height-0'"></view>
			</view>
			<!--底部按钮-->
			<view class="safe-area-inset-bottom u-bottom-fixed">
				<!-- <view v-if="full_reduce">
					<app-goods-full-reduce :theme="getTheme" :full_reduce="full_reduce"
						:sign="goods.type === 'goods' ? '' : 1">
					</app-goods-full-reduce>
				</view> -->
				<view class="app-bottom u-bottom-height-0 dir-left-nowrap">
					<!-- <view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="back">
						<image src="../../static/image/icon/index.png"></image>
						<view>首页</view>
					</view>
					<view class="dir-top-nowrap main-center cross-center little box-grow-0" @click="favorite">
						<image
							:src="goods.favorite ? '../../static/image/icon/icon-favorite-active.png' : '../../static/image/icon/icon-favorite.png'">
						</image>
						<view>收藏</view>
					</view> -->
					<template v-if="goods.is_negotiable !== 1">
						<view class="box-grow-1 dir-left-nowrap" style="height: 100%;" v-if="goods.goods_num == 0">
							<view style="width: 100%;background-color: #CDCDCD;color: #fff;"
								class="main-center cross-center button">已售罄</view>
						</view>
						<view class="box-grow-1 dir-left-nowrap" style="height: 100%;" v-else>
							<view class="main-center cross-center button" style="width: 100%;" @click="clickAttr(1)"
								:class="getTheme + '-s-back ' + getTheme+ '-m-text ' + getTheme">加入购物车
							</view>
							<view class="main-center cross-center button" style="width: 100%;color: #ffffff;"
								@click="clickAttr(1)" :class="getTheme + '-m-back ' + getTheme">立即购买
							</view>
						</view>
					</template>
				</view>
			</view>
			<!--快捷导航-->
			<!-- <app-quick-navigation></app-quick-navigation> -->
		</template>
	</app-layout>
</template>

<script>
	import {
		mapGetters,
		mapState
	} from "vuex";
	import appGoodsBanner from "../../../components/page-component/goods/app-goods-banner.vue";
	import appGoodsPrice from "../../../components/page-component/goods/app-goods-price.vue";
	import appService from "../../../components/page-component/goods/app-goods-service.vue";
	import appGoodsAttr from "../../../components/page-component/goods/app-goods-attr.vue";
	import appGoodsCoupon from "../../../components/page-component/goods/app-goods-coupon.vue";
	import appGoodsMarketing from "../../../components/page-component/goods/app-goods-marketing.vue";
	import appGoodsDetail from "../../../components/page-component/goods/app-goods-detail.vue";
	import appGoodsRecommend from "../../../components/page-component/app-goods-recommend/app-goods-recommend.vue";
	import appQuickNavigation from "../../../components/page-component/app-quick-navigation/app-quick-navigation.vue";
	import appComposition from '../../../components/basic-component/app-composition/app-composition.vue';
	import AppVipCard from '../../../components/page-component/app-vip-card/app-vip-card';
	import uniSwiperDot from '../../../components/basic-component/uni-swiper-dot/uni-swiper-dot';
	import appGoodsFlashSale from '../../../components/page-component/goods/app-goods-flash-sale.vue';
	import uAttr from '../../../components/page-component/goods/u-attr.vue';
	import appGoodsFullReduce from '../../../components/page-component/goods/app-goods-full-reduce.vue';
	export default {
		name: "goods",
		components: {
			appGoodsBanner,
			appGoodsPrice,
			appGoodsAttr,
			appGoodsMarketing,
			'app-goods-service': appService,
			'app-goods-detail': appGoodsDetail,
			'app-goods-recommend': appGoodsRecommend,
			'app-quick-navigation': appQuickNavigation,
			'app-composition': appComposition,
			uniSwiperDot,
			AppVipCard,
			appGoodsFlashSale,
			appGoodsFullReduce,
			appGoodsCoupon,
			uAttr
		},
		data() {
			return {
				goods: null,
				selectAttr: null,
				recommend_list: null,
				is_vip: false,
				is_vip_card_user: 0,
				current: 0,
				discount: null,
				attrShow: false,
				shareData: null,
				contact_tel: '',
				contact: '',
				contact_web: '',
				poster_config: this.$apiSol.goods.poster,
				poster_generate: this.$apiSol.poster.goods_new,
				// 限时抢购
				flash_sale: null,
				checked: null,
				// 商品服务
				services: null,
				// 商品详情
				detail: null,
				// 商品ID
				goodsId: null,
				// 套餐组合
				composition: null,
				autoplay: true,
				full_reduce: null,
				goods_marketing_award: null,
				express: null,
				goods_marketing: null,
				getTheme: 'q'
			};
		},
		computed: {
			themeObject: function() {
				return {
					back: this.getTheme + '-m-back ' + this.getTheme,
					theme: this.getTheme,
					color: this.getTheme + '-m-text ' + this.getTheme,
					sBack: this.getTheme + '-s-back ' + this.getTheme
				}
			},
			...mapState({
				mall: state => state.mallConfig.mall,
				gConfig: state => state.gConfig,
			}),
			/* ...mapGetters('mallConfig', {
				getTheme: 'getTheme',
			}), */
			good_negotiable: function() {
				let good_negotiable = this.mall.setting.good_negotiable;
				this.contact_tel = '';
				this.contact = '';
				this.contact_web = '';
				let arr = [];
				for (let i = 0; i < good_negotiable.length; i++) {
					if (good_negotiable[i] === 'contact_tel') {
						this.contact_tel = 'contact_tel';
					}
					if (good_negotiable[i] === 'contact') {
						this.contact = 'contact';
					}
					if (good_negotiable[i] === 'contact_web') {
						this.contact_web = 'contact_web';
					}
				}
				if (this.contact_tel) {
					arr.push(this.contact_tel);
				}
				if (this.contact) {
					arr.push(this.contact);
				}
				if (this.contact_web) {
					arr.push(this.contact_web);
				}
				return arr;
			},
			contactBtn: function() {
				const len = this.good_negotiable.length;
				const theme = this.getTheme;
				if (len === 3 && (theme === 'a' || theme === 'b' || theme === 'f')) {
					return `${theme}-m-back ${theme}-s-text ${theme}`;
				} else if (len === 3 && !(theme === 'a' || theme === 'b' || theme === 'f')) {
					return `${theme}-m-back ${theme}-s-text ${theme}`;
				}
				if (len === 2 && (theme === 'a' || theme === 'b' || theme === 'f') && !this.contact_tel) {
					return `${theme}-s-back text ${theme}`;
				} else if (len === 2 && (theme === 'a' || theme === 'b' || theme === 'f') && this.contact_tel) {
					return `${theme}-m-back ${theme}-s-text ${theme}`;
				} else if (len === 2 && !(theme === 'a' || theme === 'b' || theme === 'f') && !this.contact_tel) {
					return `${theme}-s-back text ${theme}`;
				} else if (len === 2 && !(theme === 'a' || theme === 'b' || theme === 'f') && this.contact_tel) {
					return `${theme}-m-back ${theme}-s-text ${theme}`;
				} else {
					return `${theme}-m-back ${theme}-s-text ${theme}`;
				}
			}
		},
		onLoad(options) {
			// #ifdef MP-WEIXIN
			wx.showShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			// #endif
			if (this.isLogin) {
				this.$store.dispatch('user/info');
			} else {}
			this.loadData(options.id);
		},
		onShareAppMessage(object) {
			if (object.from === 'button' && this.shareData) {
				return this.$shareAppMessage(this.shareData);
			}
			return this.$shareAppMessage({
				title: this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
				imageUrl: this.goods.app_share_pic ? this.goods.app_share_pic : '',
				path: '/plugins/mch_solitaire/togoods/togoods',
				params: {
					id: this.goodsId
				}
			});
		},
		// #ifdef MP-WEIXIN
		onShareTimeline() {
			// 分享朋友圈beta
			return this.$shareTimeline({
				title: this.goods.app_share_title ? this.goods.app_share_title : this.goods.name,
				query: {
					id: this.goodsId
				}
			});
		},
		// #endif
		methods: {
			// 规格选择
			check(obj) {
				this.checked = obj;
			},
			rightFunc(goods) {
				let url = '/plugins/mch_solitaire/order-submit/order-submit?mch_list=' + JSON.stringify([goods]) +
					'&mch_id=0'
				uni.navigateTo({
					url: url
				});
			},
			leftFunc(number) {
				this.$request({
					url: this.$apiSol.cart.add,
					method: 'post',
					data: {
						mch_id: this.goods.mch_id ? this.goods.mch_id : 0,
						goods_id: this.checked.goods_id,
						attr: this.checked.id,
						num: number
					}
				}).then(res => {
					if (res.code === 0) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						this.close();
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2500
						});
					}
				});
			},
			change(e) {
				if (e.detail.source === 'touch') {
					this.current = e.detail.current;
				}
				if (e.detail.source === 'autoplay') {
					this.current = e.detail.current;
				}
			},
			quickShare(info) {
				this.shareData = info;
			},
			toComposition(item) {
				let id = item.id > 0 ? item.id : this.composition.list[0].id
				uni.navigateTo({
					url: this.composition.url + '?goods_id=' + this.goodsId + '&composition_id=' + id
				})
			},
			loadData(id) {
				this.$showLoading();
				this.$request({
					url: this.$apiSol.goods.detail,
					data: {
						id: id
					}
				}).then(response => {
					this.$hideLoading();
					if (response.code === 0) {
						let {
							services,
							detail,
							name,
							vip_card_appoint,
							plugin_extra,
							id,
							goods_activity,
							goods_marketing_award,
							goods_marketing,
							express
						} = response.data.goods;
						uni.setNavigationBarTitle({
							title: name
						});
						this.goods = response.data.goods;
						this.services = services;
						this.detail = detail;
						this.goodsId = id;
						this.flash_sale = plugin_extra.flash_sale;
						this.composition = plugin_extra.composition;
						this.goods_marketing_award = goods_marketing_award;
						this.goods_marketing = goods_marketing;
						this.express = express;
						if (goods_activity) {
							this.full_reduce = goods_activity.full_reduce;
						}
						if (vip_card_appoint.discount || vip_card_appoint.discount == '0.00') {
							this.is_vip = true;
							this.discount = vip_card_appoint.discount
						}
						this.is_vip_card_user = vip_card_appoint.is_vip_card_user;
						// this.loadRecommend();
					} else {
						uni.showToast({
							title: response.msg,
							icon: 'none'
						});
					}
				}).catch(() => {
					this.$hideLoading();
				});
			},
			onAttr(data) {
				this.selectAttr = data;
			},
			loadRecommend() {
				this.$request({
					url: this.$apiSol.goods.new_recommend,
					data: {
						goods_id: this.goodsId,
						type: 'goods'
					}
				}).then(response => {
					if (response.code === 0) {
						this.recommend_list = response.data.list;
					}
				});
			},
			back() {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			},
			favorite() {
				let url = this.$apiSol.user.favorite_add;
				let favorite = true;
				if (this.goods.favorite) {
					url = this.$apiSol.user.favorite_remove;
					favorite = false;
				}
				this.goods.favorite = favorite;
				this.$request({
					url: url,
					data: {
						goods_id: this.goodsId
					}
				}).then(response => {
					if (response.code === 0) {} else {
						uni.showModal({
							title: '提示',
							content: response.msg,
							showCancel: false
						});
					}
				});
			},
			clickAttr(data) {
				console.log(data, "商品aaaaaaaaaaaa");
				if (this.goods.type === 'ecard' && data === 0) {
					uni.showToast({
						title: '虚拟商品不允许加入购物车',
						icon: 'none'
					});
					return;
				}
				this.attrShow = true;
				console.log(this.attrShow,"我显示 。。。。。。。。。。。。");
			},
			setCoupon(index) {
				this.$set(this.goods.goods_coupon_center[index], 'is_receive', 1);
			}
		},
		onShow() {
			this.autoplay = true;
		},
		onHidden() {
			this.autoplay = false;
			this.attrShow = false;
		}
	}
</script>

<style scoped lang="scss">
	.goods-composition {
		padding: 24rpx;
		background-color: #fff;

		.goods-composition-title {
			font-size: 28rpx;
			color: #353535;
			margin-bottom: 20rpx;
		}

		.goods-composition-swiper {
			height: 194rpx;
		}

		.goods-composition-more {
			margin: 20rpx auto 4rpx auto;
			width: 226rpx;
			padding: 0 24rpx;
			height: 56rpx;
			line-height: 54rpx;
			border-radius: 28rpx;
			border: 2rpx solid #bbbbbb;
			font-size: 24rpx;
			color: #999999;

			image {
				width: #{12rpx};
				height: #{22rpx};
				display: block;
			}
		}
	}

	.goods-name {
		padding: 24upx 24upx 0 24upx;
		background-color: #ffffff;
		color: #353535;
		font-size: 32upx;
		line-height: 42upx;
	}

	.goods-subtitle {
		padding: #{24rpx 24rpx 0 24rpx};
		font-size: 24rpx;
		background-color: #ffffff;
		color: #999999;
	}

	.price {
		padding-top: #{24rpx};
		background-color: #ffffff;
	}

	.vip-card {
		padding-bottom: #{20rpx};
		background-color: #fff;
	}

	.attr {
		background-color: #f7f7f7;
	}

	.bottom {
		width: 100%;
		height: #{110rpx};
	}

	.app-bottom {
		width: 100%;
		font-size: $uni-font-size-general-one;
		background-color: #ffffff;

		.little {
			width: #{110rpx};
			height: 100%;
			background-color: #ffffff;
			font-size: #{20rpx};
			color: $uni-general-color-two;

			&:first-child {
				border-right: #{1rpx} solid #e2e2e2;
			}

			image {
				width: #{40rpx};
				height: #{40rpx};
				display: block;
				margin-bottom: #{10rpx};
			}
		}

		.btn {
			height: 100%;
		}

		.button {
			width: 50%;
			height: 100%;
		}

		.service {
			color: #ffffff;
		}
	}

	.text {
		color: #ffffff;
	}

	.default-bakground {
		background-color: #446dfd;
	}

	.u-bottom-fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1500;
		background-color: #ffffff;
	}

	.u-bottom-height-0 {
		height: 110upx;
	}

	.u-bottom-height-1 {
		height: 190upx;
	}

	.goods-margin {
		margin-top: 20upx;
	}

	.ecard-text {
		color: #999999;
	}
</style>
